import React from 'react';
import { LogoHeader } from '../../components/Header';
import { Checkbox } from '../../components/Form';

import styles from './index.module.less';

export default class CheckoutCounter extends React.Component {
  state = {
    activeType: '',
    bankList: [
      { key: 1, img: 'http://www.abchina.com/cn/images/logo_ue2.png', account: '**1234', active: false },
      { key: 2, img: 'http://www.abchina.com/cn/images/logo_ue2.png', account: '**1234', active: false },
      { key: 3, img: 'http://www.abchina.com/cn/images/logo_ue2.png', account: '**1234', active: false },
      { key: 4, img: 'http://www.abchina.com/cn/images/logo_ue2.png', account: '**1234', active: false },
      { key: 5, img: 'http://www.abchina.com/cn/images/logo_ue2.png', account: '**1234', active: false },
      { key: 6, img: 'http://www.abchina.com/cn/images/logo_ue2.png', account: '**1234', active: false },
      { key: 7, img: 'http://www.abchina.com/cn/images/logo_ue2.png', account: '**1234', active: false },
      { key: 8, img: 'http://www.abchina.com/cn/images/logo_ue2.png', account: '**1234', active: false },
    ],
  };

  onPaymentTypeClick = type => {
    this.setState({
      activeType: type,
    });
  };

  onBankItemClick = selectedBankIndex => {
    this.setState(prevState => {
      const bankList = prevState.bankList.map((item, index) => {
        return {
          ...item,
          active: selectedBankIndex === index,
        };
      });

      return {
        bankList,
      };
    });
  };

  render() {
    const { activeType, bankList } = this.state;

    return (
      <React.Fragment>
        <LogoHeader moduleName='收银台' />
        <div className={styles.content}>
          <div className={styles.box}>
            <div className={styles.orderInfoWrapperBox}>
              <div className={styles.orderImg}>
                <img src='https://gd2.alicdn.com/imgextra/i2/2846819868/TB2kVA8GeuSBuNjSsziXXbq8pXa_!!2846819868.jpg' alt='图片' />
              </div>
              <div className={styles.orderText}>
                <div className={styles.orderNo}>
                  订单编号：1234567890123123123
                </div>
                <div className={styles.orderContent}>
                  现货【送无线充/送延保/送壳膜】iphonex Apple/苹果 iPhone X 苹果x 苹果10全网通手机咨询购买iphonexs max
                </div>
              </div>
              <div className={styles.orderAmount}>
                <div className={styles.money}>
                  <span className={styles.text}>2400.00</span>元
                </div>
                <div>
                  请在4天3时20分 内完成支付
                </div>
              </div>
            </div>
            <div className={styles.paymentTypeWrapperBox}>
              <div className={styles.paymentTypeBorderedBox}>
                <div className={styles.paymentTypeTitle}>
                  支付方式
                </div>
                <div className={styles.paymentTypeSelect}>
                  <div
                    className={`${styles.selectItem} ${activeType === 'bank' ? styles.active : ''}`}
                    onClick={this.onPaymentTypeClick.bind(this, 'bank')}
                  >
                    <div className={styles.bankTransaction}>
                      网银转账（担保交易）
                    </div>
                    {
                      activeType === 'bank' && <i className={`iconfont icon-xuanze ${styles.icon}`}></i>
                    }
                  </div>
                  <div
                    className={`${styles.selectItem} ${activeType === 'balance' ? styles.active : ''}`}
                    onClick={this.onPaymentTypeClick.bind(this, 'balance')}
                  >
                    <div>钱包余额支付</div>
                    <div>可用余额：100.00元</div>
                    <div className={styles.rechargeBtn}>充值>></div>
                    {
                      activeType === 'balance' && <i className={`iconfont icon-xuanze ${styles.icon}`}></i>
                    }
                  </div>
                </div>
                {
                  activeType === 'bank' && (
                    <React.Fragment>
                      <div className={styles.paymentTypeTitle}>
                        请选择银行
                      </div>
                      <div className={`${styles.paymentTypeBankList} ${styles.clearfix}`}>
                        {
                          bankList.map((item, index) => {
                            return (
                              <div
                                className={`${styles.bankItem} ${item.active ? styles.active : ''}`}
                                key={item.key}
                                onClick={this.onBankItemClick.bind(this, index)}
                              >
                                <div className={styles.bankImg}>
                                  <img src={item.img} alt='银行' />
                                </div>
                                <div className={styles.bankAccount}>
                                  {item.account}
                                </div>
                                {
                                  item.active && <i className={`iconfont icon-xuanze ${styles.icon}`}></i>
                                }
                              </div>
                            );
                          })
                        }
                      </div>
                    </React.Fragment>
                  )
                }
              </div>
            </div>
            <div className={styles.agreeWrapperBox}>
              <div className={styles.checkbox}>
                <Checkbox />
              </div>
              <span className={styles.text}>我已同意，担保交易为买家货款同意存放平台中，确认收货完成后，卖家才会收到货款，以保护双方合法权益。</span>
            </div>
            <div className={styles.paymentBtnWrapperBox}>
              <button className={styles.paymentBtn}>去付款</button>
            </div>
          </div>
        </div>
      </React.Fragment>
    );
  }
}
